<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      :columns="columns"
      :data-grid-title="dataGridTitle"
      :operation-items="operationItems"
      :operation-Width="260"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #connection="{ scope }">
        <el-button type="success" icon="Connection" link @click="tryConnection(scope.row)"> 连接测试 </el-button>
      </template>
      <template #formSlot>
        <el-descriptions :column="2" border>
          <el-descriptions-item label-align="right" label-width="160px" :span="4">
            <template #label>
              <div class="required">驱动</div>
            </template>
            <div>
              <el-form-item
                prop="driverClassName"
                :rules="[
                  {
                    required: true,
                    message: '驱动不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <dw-select :url="jdbcDriverListUrl" value-field="driverClassName" text-field="driverClassName" v-model="formData.driverClassName" placeholder="请选择驱动..."></dw-select>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">数据库</div>
            </template>
            <div>
              <el-form-item
                prop="databaseName"
                :rules="[
                  {
                    required: true,
                    message: '请填写数据库名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.databaseName" placeholder="请填写数据库名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">数据库备注</div>
            </template>
            <div>
              <el-form-item
                prop="databaseComment"
                :rules="[
                  {
                    required: true,
                    message: '请填数据库备注!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.databaseComment" placeholder="请填数据库备注..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">主机(IP)</div>
            </template>
            <div>
              <el-form-item
                prop="hostMachineId"
                :rules="[
                  {
                    required: true,
                    message: '主机不能为空!',
                    trigger: 'blur',
                  },
                ]"
              >
                <dw-select :url="hostMachineListUrl" text-field="ipAddress" v-model="formData.hostMachineId" placeholder="请选择主机..."></dw-select>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">端口</div>
            </template>
            <div>
              <el-form-item
                prop="port"
                :rules="[
                  {
                    required: true,
                    message: '请填写端口!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input-number v-model="formData.port" />
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">用户名</div>
            </template>
            <div>
              <el-form-item
                prop="username"
                :rules="[
                  {
                    required: true,
                    message: '请填写用户名称!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.username" placeholder="请输入元素名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div class="required">密码</div>
            </template>
            <div>
              <el-form-item
                prop="password"
                :rules="[
                  {
                    required: true,
                    message: '请输入密码!',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input type="password" v-model="formData.password" placeholder="请输入登录密码"></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label-align="right" label-width="160px">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type { IAddInfoHttpConfig, IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetInfoHttpConfig, IGetPageHttpConfig, IOperationItem, IUpdateInfoHttpConfig } from '@/types/menu-datagrid-form';

import type { IDatabase } from './database.d.ts';
import { dwDeepClone, template } from '@/utils/func';
import { dwHttp } from '@/utils/http';
import DwSelect from '@/components/selector/dropdown-selector/index.vue';
defineOptions({
  name: 'DbDatasource',
});
const formData = ref<IDatabase>({
  id: '',
  projectId: '',
  databaseComment: '',
  databaseTypeName: '',
  driverClassName: '',
  hostMachineId: '',
  ipAddress: '',
  username: '',
  password: '',
  urlTemplate: '',
  port: 3306,
  databaseName: '',
  extendConfig: '',
  sortNo: 1,
});

const jdbcDriverListUrl: string = '/admin-api/modeling/jdbc/driver/dict/list';
const hostMachineListUrl: string = '/admin-api/assets/host/machine/list';
const dataGridTitle = '数据库源列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IDatabase) => {
  if (stateValue === 'add') {
    return '界面元素信息';
  } else {
    return data.databaseComment;
  }
};
const operationItems = ref<IOperationItem<IDatabase>[]>([
  {
    code: 'edit',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
  {
    slotName: 'connection',
  },
  {
    code: 'delInfo',
    extendFlag: true, //如果code有值 extendFlag=true 才有效
  },
]);
const tryConnection = (rowdata: IDatabase) => {
  const id = rowdata.id;
  const urlTemplate = rowdata.urlTemplate;
  const url = template(urlTemplate, rowdata as unknown as Record<string, string>);
  const username = rowdata.username;
  const password = rowdata.password;
  console.log(url);
  console.log(username);
  console.log(password);
  dwHttp({
    url: '/admin-api/modeling/database/connection',
    method: 'get',
    params: { id: id },
  }).then((res) => {
    console.log(res);
  });
};
const columns = ref<IColumn[]>([
  {
    prop: 'databaseTypeName',
    label: '数据库类型',
    align: 'left',
    width: 220,
  },
  {
    prop: 'driverClassName',
    label: '数据库驱动',
    align: 'left',
    width: 250,
  },
  {
    prop: 'databaseName',
    label: '数据库名称',
    align: 'left',
    width: 260,
  },
  {
    prop: 'ipAddress',
    label: '主机(IP)',
    align: 'left',
    width: 160,
  },
  {
    prop: 'username',
    label: '用户',
    align: 'left',
    width: 120,
  },
  {
    prop: 'port',
    label: '端口',
    align: 'right',
    width: 100,
  },
  {
    prop: 'databaseComment',
    label: '数据库备注',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/modeling/database/#{id}',
  delInfoMsgEmphasize: '#{databaseComment}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/modeling/database/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IDatabase> = {
  url: '/admin-api/modeling/database/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IDatabase> = {
  url: '/admin-api/modeling/database/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IDatabase> = {
  url: '/admin-api/modeling/database',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IDatabase> = {
  url: '/admin-api/modeling/database',
};
</script>
